@import "public";

@media screen and (max-width: 800px){
  .wal{max-width: 8rem;}

  $headH:1rem;
  body.navShow{
    .navBg{display: block;}
    .head .nav{right: 0;}
  }
  .navBg{
    position: fixed; z-index: 49; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); display: none;
  }
  .head{
    position: fixed;
    .navA{display: block; @include absolute($r:0, $t:0); width: $headH; height: $headH; background: url("../image/navA.png") center no-repeat; background-size: .4rem;}
  }
  .nav{
    position: fixed; height: 100%; overflow-y: auto; width: 4rem; background: #000; right: -4rem;
    .close{
      display: block; height: $headH;
      i{display: block; position: absolute; top: 0; right: 0; background: url("../image/close.png") center no-repeat; background-size: .4rem; width: $headH; height: $headH;}
    }
    ul{float: none;}
    li{
      float: none; padding-left: 0; border-top: rgba(255,255,255,0.2) solid 1px;
      a{
        line-height: $headH; padding-top: 0; font-size: .26rem; text-align: center;
        &:before{display: none}
      }
      dl{
        border-top: rgba(255,255,255,0.2) solid 1px; padding: .1rem 0;
        a{color: #fff; height: .7rem; line-height: .7rem; font-size: .24rem;}
      }
    }
  }


}
@media screen and (max-width: 550px){
  .wal{margin: 0 .3rem;}
}